<!-- 我的 -->
<template>
  <div class="user-box">
    <div class="user-top">
      <img :src="userInfo.headimgurl" alt=""/>
      <p class="my-p">用户昵称: {{ userInfo.nickname }}</p>
    </div>
    <van-cell title="唯一标识" :value="userInfo.openid"/>
    <van-cell title="用户昵称" :value="userInfo.nickname"/>

    <van-button v-show="!flag" @click="loginOnclick" round class="my-button2" type="info">登出系统</van-button>
  </div>
</template>

<script>
import storage from '@/utils/storage.js'
import {Toast} from "vant";

export default {
  inject: ['reload'],
  name: "user",
  data() {
    return {
      userInfo: {
        openid: '',
        nickname: '',
        headimgurl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJXE3Zz0U5edVRhmckrE2q5Nw1lGQia5fAbU0UecgPx4DBwAaobibNYVAo9hjgUxxT75xLEDVoAibHeA/132',
      },
      flag: false
    };
  },
  created() {
    const user = storage.get("userInfo")|| {}
    if (Tool.isNotEmpty(user)) {
      this.userInfo.headimgurl = user.headimgurl
      this.userInfo.nickname = user.nickname
      this.userInfo.openid = user.openid

      // console.log("headimgurl" + user.headimgurl)
      // console.log("nickname" + user.nickname)
    }
    if (Tool.isEmpty(user)) {
      this.flag = true
    }


  },
  methods: {
    loginOnclick() {
      storage.remove("userInfo")
      // 成功通知
      Toast('登出成功！');
      this.reload()// 需要刷新页面
    }
  },
};
</script>
<style lang="less" scoped>
.van-grid-item {
  padding: 20px;
}

.user-box {

  .user-top {
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: #333;
    color: white;

    img {
      width: 70px;
      height: 70px;
      margin-right: 10px;
      border-radius: 50%;
    }
  }

  .my-p {
    font-size: 15px;
    padding-left: 2%;
    font-size: 0.6rem;
  }

  .my-button {
    margin-left: 70%;
  }

  .my-button2 {
    margin-left: 70%;
  }
}
</style>
